<!DOCTYPE html>
<html>

<head>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/example.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/weui.min.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/element-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/vant.min.css" />
	<link rel="stylesheet" type="text/css" href="css/public.css?v=5.1" />
	<link rel="stylesheet" type="text/css" href="css/listLook.css?v=7.0.3" />
	<title>列表查看</title>
</head>

<body>
	<div id="main">
		<!-- 头部背景图片 -->
		<div class="ub-listBanner">
			<img src="images/listBanner.png">
		</div>
		<div class="ub-listContentBg">
			<!-- 行业，列表。tab切换 -->
			<div class="ub-listTitle">
				<div v-cloak @click="active = 1" :class="active == 1?'ub-titleActive':''">
					行业 ( {{placeList.length}} )
					<!-- <p>{{categoryTotal}}</p> -->
					<div :class="active == 1?'ub-line':''"></div>
				</div>
				<div class="ub-line2"></div>
				<div v-cloak @click="active = 2" :class="active == 2?'ub-titleActive':''">
					网格 ( {{gridTotal}} )
					<div :class="active == 2?'ub-line':''"></div>
				</div>
				<div class="ub-line2"></div>
				<div v-cloak @click="active = 3" :class="active == 3?'ub-titleActive':''">
					监控 ( {{monitorTotal}} )
					<div :class="active == 3?'ub-line':''"></div>
				</div>
			</div>
			<div class="ub-line1"></div>
			<!-- 行业下展示场所分类，网格下展示社区分类 -->
			<div style="background: #fff;padding-top: 10px;">
				<div v-cloak style="margin: 5px 0 0 20px;color: #888888;" v-show="active !== 3">场所总数:
					&nbsp;<span style="color: #FF5000;">{{placeTotal}}处</span>
				</div>
				<div v-cloak class="ub-listContent1" v-show="active == 1">
					<a v-cloak @click="goPlaceListCate(item.cate_id,1)" v-for="item in placeList" :key="item.cate_id"
						class="ub-place">
						<img :src="item.cate_icon">
						<p>{{item.cate_name}}</p>
						<div>{{item.count}}处</div>
					</a>
				</div>
				<div v-cloak class="ub-listContent2" v-show="active == 2" style="background: #EEF5FC;">
					<div v-for="(item, index) in gridList" v-if="index == 0" class="ub-communityContent">
						<div class="ub-community">
							<div v-cloak>
								<img src="images/listIcon15.png" alt="">
								<div>
									<p>{{item.name}}</p>
									<div v-cloak>{{item.count}}处</div>
								</div>
							</div>
							<div @click="unwindBtn(item.dept_id)" class="ub-lookBth">{{item.flag?'收起':'查看'}}</div>
						</div>
						<div class="ub-grid" v-show="item.flag">
							<div @click="goPlaceList(item1.dept_id,2)" v-for="(item1,index) in sonList"
								:key="item1.dept_id" class="ub-gridContent">
								<div>
									<p>{{item1.place_name}}</p>
									<div>{{item1.count}}处</div>
								</div>
								<img src="images/listRight.png">
							</div>
							<div @click="item.flag = !item.flag" class="ub-packUp">
								<img src="images/packUp.png">
							</div>
						</div>
					</div>
					<div v-cloak v-for="(item, index) in gridList" v-if="index != 0" class="ub-communityContent">
						<div class="ub-community ub-layout" style="position:  relative;">
							<div>
								<img src="images/listIcon15.png" alt="">
								<div>
									<p>{{item.name}}</p>
									<div>{{item.count}}处</div>
								</div>
							</div>
							<div @click="unwindBtn(item.dept_id)" class="ub-lookBth">{{item.flag?'收起':'查看'}}</div>
						</div>
						<div class="ub-grid" v-show="item.flag">
							<div @click="goPlaceList(item1.dept_id,2)" v-for="(item1,index) in sonList"
								:key="item1.dept_id" class="ub-gridContent">
								<div>
									<p>{{item1.place_name}}</p>
									<div v-cloak>{{item1.count}}处</div>
								</div>
								<img src="images/listRight.png">
							</div>
							<div @click="item.flag = !item.flag" class="ub-packUp">
								<img src="images/packUp.png">
							</div>
						</div>
					</div>

				</div>
				<div v-cloak style="margin: 5px 0 0 20px;color: #888888;" v-show="active == 3">监控总数:
					&nbsp;<span style="color: #FF5000;">{{monitorTotal}}</span>
				</div>
				<!-- 头部搜索框 -->
				<div class="ub-search" style="display: none;" v-show="active == 3">
					<div class="ub-input">
						<img src="images/placeSearch.png" alt="">
						<input type="text" placeholder="请输入监控名称" v-model.trim="searchVal">
						<div class="ub-search_button" @click="search" style="margin-right: 6px;">
							<span v-show="!searchLoading">搜索</span>
							<i v-show="searchLoading" class="el-icon-loading" style="display: none;"></i>
						</div>
						<div class="ub-search_button" @click="reset">
							<span v-show="!searchLoading">重置</span>
							<i v-show="searchLoading" class="el-icon-loading" style="display: none;"></i>
						</div>
					</div>
				</div>
				<!--  -->
				<div v-cloak class="ub-listContent2" v-show="active == 3" style="background: #EEF5FC;">
					<div v-cloak v-for="(item, index) in monitorCommunityList" class="ub-communityContent">
						<div class="ub-community ub-layout" v-show="!searchflag">
							<div>
								<img src="images/listIcon15.png" alt="">
								<div>
									<p>{{item.name}}</p>
									<div>{{item.monitoring_num}}</div>
								</div>
							</div>
							<div @click="unwindBtnMonitor(item.id)" class="ub-lookBth">{{item.flag?'收起':'查看'}}</div>
						</div>

						<div v-for="(type,typeIndex) in item.category" :key="type.category_id">
							<div class="ub-grid">
								<div class="ub-gridContent" v-show="item.flag && !searchflag">
									<div style="padding-right: 90px;">
										<p style="width: 80%;">{{type.name}}</p>
										<div>{{type.monitoring_num}}</div>
									</div>
									<div class="ub-ll_button" @click="unwindBtnMonitorType(item,type)">
										{{type.flag?'收起':'查看'}}</div>
								</div>
							</div>

							<div class="ub-grid" v-show="type.flag || searchflag">
								<div @click="handleMonitorMarker(item1.point_id)" v-for="(item1,index) in type.list"
									:key="item1.point_id" class="ub-gridContent">
									<div>
										<p style="width: 100%;">{{item1.name}}</p>
									</div>
									<img src="images/listRight.png">
								</div>
								<div @click="type.flag = !type.flag" class="ub-packUp" v-show="!searchflag">
									<img src="images/packUp.png">
								</div>
							</div>
						</div>



						<div class="ub-grid" v-show="item.flag || searchflag">
							<div @click="handleMonitorMarker(item1.point_id)" v-for="(item1,index) in item.list"
								:key="item1.point_id" class="ub-gridContent">
								<div>
									<p style="width: 100%;">{{item1.name}}</p>
								</div>
								<img src="images/listRight.png">
							</div>
							<div @click="item.flag = !item.flag" class="ub-packUp" v-show="!searchflag">
								<img src="images/packUp.png">
							</div>
						</div>
					</div>
					<van-empty description="无搜索内容" v-show="active == 3 && isEmpty && searchflag" />
				</div>
			</div>
		</div>
		<!-- 显示监控，弹窗 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show="isShowVideo">
			<div v-show="isLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-video1" v-show="isShowVideo">
			<div class="my-player" id="video1">
				<video id="my-player" style="width: 100%;" preload="auto" muted autoplay controls
					style="border: 1px solid red;" webkit-playsinline="true" playsinline="true">
					<source src="">
				</video>
				<div id="my-player1" class="ub-video"></div>
			</div>
		</div>
		<div class="ub-cloce" v-show="isShowVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>

		<!-- 显示天翼监控 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show=" isShowTYVideo">
			<div v-show="isShowTYVideoLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-sty" v-show="isShowTYVideo && !isShowTYVideoLoading" style="display: none;" v-cloak>
			<iframe id="TYplayer" :src="TYUrl" allowfullscreen marginwidth=0 marginheight=0 onerror="error">
			</iframe>
		</div>
		<div class="ub-cloce" v-show="isShowTYVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>
		<!-- 底部栏 -->
		<div class="ub-footerNav">
			<div role="tablist" style="background: #fff;" aria-label="选项卡标题" class="weui-tabbar">
				<a href="index.html" id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false"
					aria-controls="panel2" class="weui-tabbar__item">
					<img src="images/navIcon1.png" alt="" class="weui-tabbar__icon">
					<p aria-hidden="true" id="t2_title" class="weui-tabbar__label">地图查看</p>
				</a>
				<a href="listLook.html" id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips"
					aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
					<div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon3-selected.png" alt="" class="weui-tabbar__icon">
						<!-- <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span> -->
					</div>
					<p id="t1_title" aria-hidden="true" class="weui-tabbar__label">列表查看</p>
				</a>
				<a href="personalCenter.html" id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips"
					aria-selected="false" aria-controls="panel3" class="weui-tabbar__item">
					<div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon2.png" alt="" class="weui-tabbar__icon">
						<!-- <span class="weui-badge weui-badge_dot" role="img" alt="new"
							style="position: absolute; top: 0; right: -6px;"></span> -->
					</div>
					<p id="t3_title" aria-hidden="true" class="weui-tabbar__label">个人中心</p>
				</a>
			</div>
		</div>
	</div>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/cHttp.js?v=1.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/hls.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="js/video-contrib.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="js/videoJs.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/DPlayer.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ckplayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="h5Player/h5player.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/EasyWasmPlayer.js"></script>
	<script src="js/wxPublic.js?v=15.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="https://vcp.21cn.com/metaplayer/static/template/latest/lib/mpIframe-min.js" type="text/javascript"
		charset="utf-8"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js"></script>
	<script>
		new VConsole()
	</script> -->
	<script src="js/listLook.js?v=1.0.114" type="text/javascript" charset="utf-8"></script>
</body>

</html>